<template>
  <div
    id="song-detail"
    :class="{ 'is-show': isShow }">
    <!-- 背景虚化 -->
    <div class="blur"><img :src="imgUrl" alt=""></div>
    <div @click="closeSongDetail" class="close-button">
      <i class="iconfont icon-suoxiao"></i>
    </div>
    <my-scrollbar>
      <div class="main-song-detail">
        <left-part/>
        <right-part/>
      </div>
    </my-scrollbar>
  </div>
</template>

<script>
import MyScrollbar from 'components/content/perfectscrollbar/MyScrollbar.vue'
import LeftPart from './childrenCpns/LeftPart.vue'
import RightPart from './childrenCpns/RightPart.vue'
import types from 'utils/types.js'

export default {
  name: 'SongDetail',
  components: {
    MyScrollbar,
    LeftPart,
    RightPart
  },
  data () {
    return {
      isShow: false
    }
  },
  computed: {
    // 1. 获取vuex的isShowSongDetail是否为true
    isShowSongDeail () {
      return this.$store.state.isShowSongDetail
    },
    // 2. 获取封面图片url
    imgUrl () {
      return this.$store.state.playInfo.songData && this.$store.state.playInfo.songData.al.picUrl
    }
  },
  watch: {
    isShowSongDeail () {
      // 1. 展现songdetail
      this.isShow = this.isShowSongDeail
      // 2. 移除事件总线
    }
  },
  methods: {
    closeSongDetail () {
      this.$store.commit(types.CLOSE_SONG_DETAIL)
    }
  }
}
</script>

<style scoped lang="less">
#song-detail {
  position: absolute;
  left: 0;
  bottom: var(--footer--height);
  width: 0;
  height: 0;
  background-color: #fafafa;
  transition: all 300ms;
  overflow: hidden;
  opacity: 0;
  z-index: 999;
  &.is-show {
    width: 100%;
    height: calc(100% - var(--footer--height));
    opacity: 1;
  }
  .close-button {
    cursor: pointer;
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 1;
    padding: 2px 10px;
    border-radius: 4px;
    background-color: #fcfcfc;
    border: 1px solid #e3e3e3;
    &:hover {
      background-color: rgba(0, 0 ,0, 0.1 );
      border: 1px solid #c3c4c8;
    }
    i {
      font-size: 18px;
    }
  }
  .blur {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    padding: 0 20%;
    img {
      position: absolute;
      top: 50%;
      width: 60%;
      transform: translateY(-50%);
      filter:blur(300px);
    }
  }
  .main-song-detail {
    padding: 0 10%;
    display: flex;
    height: 80%;
  }
}
</style>
